<!--
 * @Author: your name
 * @Date: 2021-03-29 09:03:28
 * @LastEditTime: 2021-04-25 10:28:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Hotevents\index.vue
-->
<template>
  <div>
    <span style="font-size: 26px">{{
      this.title ? this.title : "热门活动"
    }}</span>

    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%; table-layout: fixed"
      :header-cell-style="header_align"
      :cell-style="cell_align"
      :row-class-name="tableRowClassName"
      :row-key="row => row.id"
      v-loading="loadingTable"
    >
      >
      <el-table-column label="部门名称" sortable column-key="id">
        <template slot-scope="scope">
          <el-tag type="primary" disable-transitions>
            {{ scope.row.department }}
          </el-tag>
          <div class="tag" :key="scope.row.types && scope.row.types[0].name">
            <el-tag
              type="success"
              size="mini"
              style="margin: 0 5px"
              v-for="item in scope.row.types"
              :key="item.id"
            >
              {{ item.name }}
            </el-tag>
          </div>
          <!-- 左侧线条 -->
          <div
            :class="
              timeDel[scope.$index] == false
                ? 'typeGrey type'
                : scope.row.stock === 0
                ? 'typeRed type'
                : 'typeGreen type'
            "
            :key="timeDel[scope.$index]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="活动主题" width="280">
        <template slot-scope="scope">
          <div style="font-weight: 900" @click="handleClick(scope.row)">
            <el-link type="primary">{{ scope.row.name }}</el-link>
          </div>
          <div
            style="
              width: 100%;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ scope.row.detail }}
          </div>
          <div style="color: #c0c4cc">
            <!-- //负责人详情 -->
            <el-popover
              placement="top-start"
              title="负责人详情"
              width="300"
              trigger="hover"
              style="dispaly: none"
            >
              <div>
                <el-form
                  label-position="right"
                  label-width="100px"
                  style="font-size: 18px"
                >
                  <el-form-item label="姓名:">
                    {{
                      scope.row.adminBriefInfo
                        ? scope.row.adminBriefInfo.name
                        : ""
                    }}
                  </el-form-item>
                  <el-form-item label="性别:">
                    {{
                      scope.row.adminBriefInfo
                        ? scope.row.adminBriefInfo.gender === 1
                          ? "男"
                          : "女"
                        : ""
                    }}
                  </el-form-item>
                  <el-form-item label="学院:">
                    {{
                      scope.row.adminBriefInfo
                        ? scope.row.adminBriefInfo.college
                        : ""
                    }}
                  </el-form-item>
                  <el-form-item label="邮箱:">
                    {{
                      scope.row.adminBriefInfo
                        ? scope.row.adminBriefInfo.mail
                        : ""
                    }}
                  </el-form-item>
                  <el-form-item label="电话:">
                    {{
                      scope.row.adminBriefInfo
                        ? scope.row.adminBriefInfo.tel
                        : ""
                    }}
                  </el-form-item>
                </el-form>
              </div>
              <div slot="reference">
                负责人:{{
                  scope.row.adminBriefInfo ? scope.row.adminBriefInfo.name : ""
                }}
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="活动开始时间" width="180">
      </el-table-column>
      <el-table-column prop="college" label="学院"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="deadline" label="截至倒计时" width="180">
        <template slot-scope="scope">
          <CountDownIndex
            :time="scope.row.deadline"
            paramsStyle="center"
            @timeEnd="() => timeEnd(scope.$index)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="剩余名额/名额">
        <template slot-scope="scope">
          <div :style="scope.row.stock < 5 ? 'color:#f56c6c' : 'color:#67c23a'">
            {{
              scope.row.number === -1
                ? "不限额"
                : scope.row.stock + "/" + scope.row.number
            }}
          </div>
        </template>
      </el-table-column>
      操作页面
      <el-table-column
        prop="tag"
        label="操作"
        width="180"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            :disabled="timeDel[scope.$index] === false"
          >
            查看详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="signUp(scope.row)"
            :disabled="
              !timeDel[scope.$index] ||
                scope.row.isSign === 1 ||
                scope.row.confirm != undefined ||
                scope.row.stock === 0
            "
          >
            {{
              scope.row.confirm === 0
                ? "等待管理员确认"
                : scope.row.confirm === 1
                ? "管理员已确认"
                : scope.row.isSign === 1
                ? "已报名"
                : "报名"
            }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 活动详情弹出层 -->
    <el-dialog
      title="活动详情"
      :visible.sync="outerVisible"
      v-if="outerVisible"
      v-loading="loading"
    >
      <HoteventsDetailsIndex :id="this.id" @loading="loadingToggle" />
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="signUp"
          :disabled="
            this.row.isSign === 1 ||
              this.row.confirm !== undefined ||
              this.row.stock === 0
          "
          >{{
            this.row.confirm === 0
              ? "等待管理员确认"
              : this.row.confirm === 1
              ? "管理员已确认"
              : this.row.isSign === 1
              ? "已报名"
              : "我要报名"
          }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventsApi from "../../api/HotEvent";
import { mapMutations } from "vuex";
import Home from "../../api/Home";
export default {
  data() {
    return {
      state: "",
      tableData: [],
      //外层
      outerVisible: false,
      //内层
      innerVisible: false,
      //详情活动id
      id: "",
      timeDel: { 0: true },
      loading: false,
      total: 0,
      loadingTable: false,
      pageNum: 1,
      pageSize: 6
    };
  },
  props: {
    title: {
      type: String
    },
    apiName: {
      type: String
    },
    tagId: {
      type: String
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    //转换时间戳
    timeChange(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //查看详情弹框
    handleClick(row) {
      this.$router.push({
        path: "/info/activity/:id",
        query: {
          id: row.aid
        }
      });
      this.id = row.id;
      this.row = row;
    },
    //报名
    signUp(row) {
      console.log("报名", row);
      const user = JSON.parse(localStorage.getItem("sy"));
      this.$confirm(
        `${user.name} 同学, 是否要报名${row.name ? row.name : this.row.name}?`,
        "报名",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: "加急报名中!!!",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          //发请求
          let time = setTimeout(() => {
            this.$message({
              type: "error",
              message: "无活动信息或活动报名已结束"
            });
            loading.close();
          }, 0);
          const { code } = await eventsApi.activeEnroll({
            uid: row.id ? row.id : this.row.id
          });
          if (code === 0) {
            this.$message({
              type: "success",
              message: "报名成功!"
            });
            loading.close();
            location.reload([true]);
          } else {
            this.$message({
              type: "error",
              message: "报名失败! 请联系管理员"
            });
            loading.close();
          }
          clearTimeout(time);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消报名"
          });
        });
    },
    loadingToggle() {
      this.loading = !this.loading;
    },
    //判断时间是否到了
    timeEnd(index) {
      this.timeDel[index] = false;
    },
    //将时间戳转换成时间
    transTime(times = []) {
      let data = times;
      data.map((item, index) => {
        item.createDate = this.timeChange(item.createDate);
        item.deadline = this.timeChange(item.deadline);
        if (item.createDate == item.deadline) {
          this.timeDel[index] = false;
        } else {
          this.timeDel[index] = true;
        }
        // //只保留2个tag
        // if (item.types && item.types.length == 3) {
        //   item.types = item.types.splice(item.types.length - 1, 1);
        // }
        //设置时间结束全部为true，未结束
      });
      return data;
    },
    //设置列表行样式
    tableRowClassName() {
      // { row, rowIndex }
      //  暂时不弄吧
      return "aaa";
    },
    //当前页
    async curPage(val) {
      const data = await eventsApi[this.apiName ? this.apiName : "HotEvents"]({
        pageNum: val
      });
      console.log("分页", data);
      let that = this;
      this.loadingTable = true;
      that.tableData = that.transTime(data.list);
      that.loadingTable = false;
    },
    //返回一个字符来逃避类型检测
    cell_align: () => "text-align:center;position: relative;height:100px",
    header_align: () => "text-align:center;",
    ...mapMutations(["activeIndexUpdate"])
  },
  created() {
    this.activeIndexUpdate("/info/activity");
  },
  async mounted() {
    console.log("id", this.tagId);
    const data = await Home.Home();
    console.log("活动", data);
    this.pageNum = data.pageNum;
    this.pageSize = data.pageSize;
    this.total = data.total;
    this.tableData = this.transTime(data.list);
  }
};
</script>

<style scoped>
.tag {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
a {
  text-decoration: none;
  outline: none;
}
/* 圆点 */
.type {
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.typeGreen {
  border: 1px solid #67c23a;
  background-color: #67c23a;
}
.typeGrey {
  border: 1px solid #c0c4cc;
  background-color: #c0c4cc;
}
.typeRed {
  border: 1px solid #f56c6c;
  background-color: #f56c6c;
}
.el-form-item {
  margin-bottom: 0;
}
.el-table .aaa {
  background: #f56c6c;
}
</style>
